<template>
  <div class="home-page-layout">
    <search placeholder disabled class="search" @search="onSearch">
      <div class="search-alert">
        <img src="@/assets/icons/gift.png" alt />
        您有一个新手大礼包待领取 >
      </div>
    </search>

    <course-grid class="course-grid" />

    <coupon class="coupon" />

    <func-grid class="func-grid" />

    <advertisement />

    <swipe />

    <custom-made class="custom-made" />

    <career-plan class="career-plan" />

    <star-course class="star-course" />

    <career-info class="career-info" />

    <list-finished />
  </div>
</template>

<script>
import Search from './Search'
import CourseGrid from './CourseGrid'
import Coupon from './Coupon'
import FuncGrid from './FuncGrid'
import Advertisement from './Advertisement'
import Swipe from './Swipe'
import CustomMade from './CustomMade'
import CareerPlan from './CareerPlan'
import StarCourse from './StarCourse'
import CareerInfo from './CareerInfo'
import ListFinished from '@/components/ListFinished'

export default {
  components: {
    Search,
    CourseGrid,
    Coupon,
    FuncGrid,
    Advertisement,
    Swipe,
    CustomMade,
    CareerPlan,
    StarCourse,
    CareerInfo,
    ListFinished
  },

  data() {
    return {
      searchForm: {}
    }
  },

  methods: {
    onSearch(e) {}
  }
}
</script>

<style lang="less" scoped>
.home-page-layout {
  .search {
    .search-alert {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #2574ff;

      img {
        width: 12px;
        margin-right: 8px;
      }
    }
  }

  .coupon {
    margin-top: 16px;
  }

  .custom-made, .career-plan, .star-course, .career-info {
    margin-top: 30px;
  }
}
</style>
